<template>
  <div>
    <van-pull-refresh
      v-model="firstTabLoading"
      :class="$style.refreshContainer"
      @refresh="onRefresh"
    >
      <div v-if="surveyList.length > 0">
        <van-list
          v-model="loading"
          :finished="noMore"
          finished-text="没有更多了"
          @load="getSurveyList"
        >
          <div
            v-for="item in surveyList"
            :key="item.id"
            :class="$style.surveyContainer"
            @click="joinSurvey(item.id)"
          >
            <div :class="$style.examTextContainer">
              <div :class="$style.surveyTitle">
                <img :class="$style.img" src="../../assets/survey.png" />
                <span :class="$style.title">{{ item.title }}</span>
              </div>
              <div :class="$style.fillNum">已填写：{{ item.fillNum }}</div>
              <div :class="$style.createTime">填写时间：{{ createTime(item.createTime) }}</div>
            </div>
          </div>
        </van-list>
      </div>
      <van-empty v-else description="暂无考试数据" />
    </van-pull-refresh>
  </div>
</template>

<script>
import { List, PullRefresh, Empty } from 'vant';
import { dateFormat } from '@/helpers/data-transform';
import { GetSurveyList } from '@/apis';
export default {
  name: 'Home',
  components: {
    'van-pull-refresh': PullRefresh,
    'van-empty': Empty,
    'van-list': List,
  },
  data() {
    return {
      /**第一个tab的loading */
      firstTabLoading: false,
      /**我的成绩列表 */
      surveyList: [],
      active: 'tab1',
      totalPage: 1,
      pageIndex: 1,
      pageSize: 10,
      loading: false,
      disabled: false,
    };
  },
  computed: {
    noMore() {
      return this.pageIndex > this.totalPage;
    },
    createTime() {
      return (time) => {
        return dateFormat('yyyy/MM/dd hh:mm', new Date(time));
      };
    },
  },

  mounted() {
    this.pageIndex = 1;
    this.getSurveyList();
  },
  methods: {
    getSurveyList(refresh) {
      if (this.disabled) return;
      if (!refresh && this.noMore) return;
      this.disabled = true;
      return GetSurveyList({ page: this.pageIndex, size: this.pageSize }).then((res) => {
        var data = res.data;
        if (this.pageIndex === 1) {
          this.totalPage = data.totalPage;
          this.surveyList = data.list;
        } else {
          this.surveyList = [...this.surveyList, ...data.list];
        }
        this.disabled = false;
        this.loading = false;
        this.pageIndex = this.pageIndex + 1;
      });
    },
    onLoad() {},
    joinSurvey(id) {
      this.$router.push(`/survey?id=${id}`);
    },
    /** 下拉刷新 */
    onRefresh() {
      this.pageIndex = 1;
      this.getSurveyList(true).then(() => (this.firstTabLoading = false));
    },

    /** 倒计时 */
  },
};
</script>

<style lang="less" module>
@import '~vant/lib/style/var.less';
@import '~@scf/ding-style-less/var.less';

div::-webkit-scrollbar {
  width: 0;
}

.refreshContainer {
  height: 100%;
  min-height: 80vh;
  padding: 10px;
}
.surveyContainer {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #fff;
  margin-bottom: 10px;
  border-radius: 6px;
}
.img {
  height: 20px;
  width: 20px;
  margin-right: 12px;
}
.surveyTitle {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 24px;
  color: #303133;
  margin-bottom: 15px;
}
.title {
  flex-grow: 1;
  width: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.fillNum {
  line-height: 20px;
  color: #606266;
  margin-bottom: 5px;
}
.createTime {
  line-height: 20px;
  color: #909399;
}
</style>
